<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/styleold.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/percircle.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
</head>
<body>
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">找回密码</div>
    </header>
    <div class="aui-bar-nav-d"></div>

    <ul class="user-password">
        <li>
            <label>手机号码</label>
            <input class="text-1" type="text" placeholder="请输入您的手机号码" id="mobile">
            <div class="check" id="checkPhone"></div>
        </li>
        <li>
            <label>验证码</label>
            <input class="text-2" type="text" placeholder="请输入验证码" onkeyup="checkCaptcha();" id="sms_code">
            <button onclick="sendCaptcha();" id="sendCodeBtn">获取验证码</button>
            <!-- <div type="submit" class="aui-btn active" onclick="sendCaptcha();" id="sendCodeBtn">发送验证码</div> -->
            <div class="check" id="checkCaptcha"></div>
        </li>
    </ul>

    <div class="user-data-btn" onclick="user_password_retrieve()">下一步</div>
    <div class="user-password-d" onclick="licai_box()">收不到验证码?</div>

    <div class="licai-buy-box-bg">
      <div class="licai-buy-box">
        <h3>收不到验证码</h3>
        <p>1、请确认您正在使用的手机号码是否
            与当前号码一致。</p>
            <p>2、请检查短信是否被手机安全软件拦
                截。</p>
                <p>3、获取更多帮助，请拨打金可贷客服
                    电话：<a class="green">400-0454-017</a></p>
                    <div class="licai-buy-box-btn">
                        <a class="green" onclick="licai_box_close()">知道了</a>
                    </div>
                </div>
            </div>

        </body>
        <script type="text/javascript">
            apiready = function(){
                var mobile = $api.getStorage('mobile');
                // alert(mobile);
                var mobileEle = $api.byId('mobile');

                mobileEle.value = mobile;
                // 验证码
                lastCaptcha = '';
            }

        // 发送验证码
        function sendCaptcha(){
            var mobile = $api.byId('mobile');
            var mobileValue = mobile.value;
        // 获取验证码
        checkMobile(mobileValue);
    };

        // 获取验证码
        function checkMobile(mobileValue) {

            var re = /^1\d{10}$/
            if (re.test(mobileValue)) {

            // 手机号码符合要求后开始倒计时
            var time = 60;
            var sendCodeBtn = $api.byId('sendCodeBtn');
            var timer = setInterval(function(){    
                time--;
                $api.removeCls(sendCodeBtn, 'active');
                sendCodeBtn.innerText = time + " 秒";
                sendCodeBtn.removeAttribute('onclick');
                if (time==0) {
                  time = 60;
                  clearInterval(timer); 
                  $api.addCls(sendCodeBtn, 'active');
                  sendCodeBtn.innerText = "发送验证码";
                  sendCodeBtn.setAttribute('onclick',"sendCaptcha();");
              }
          },1000);
            // 获取验证码
            api.ajax({
                url: webAddress + '/index.php?ctl=app_user_center&act=get_register_verify_code_mobile',
                method: 'post',
                data: {
                    values: { 
                        user_mobile: mobileValue,
                    },
                }
            },function(ret, err){
                if (ret) {

                    if (ret.status == 0) {
                        alert(ret.info);
                        return false;
                    }else{
                        var captcha = ret.code;
                        alert(captcha);
                        captchaSend(mobileValue,captcha);
                    }
                } else {
                    alert(err.msg);
                }
            });
        } else {
            alert("请输入正确的手机号");
            var mobile = $api.byId('mobile');
            mobile.focus();
        }
    }

        // 发送验证码
        function captchaSend(mobileValue,captcha){
        // 将最终收到的验证码定义成全局变量
        lastCaptcha = captcha;
        api.ajax({
            url: webAddress + '/sendmsg/SendTemplateSMS.php',
            method: 'post',
            data: {
                values: { 
                    mobile: mobileValue,
                    code: captcha,
                },
            }
        },function(ret, err){
            if (ret) {
            } else {
                // 逻辑在这里写
                var sms_code = $api.byId('sms_code');
                sms_code.focus();
            }
        });
    };

        // 校验验证码
        function checkCaptcha(){

            var sms_codeEle = $api.byId('sms_code');
            var sms_codeValue = sms_codeEle.value;
            var sms_codeLength = sms_codeValue.length;

            if (sms_codeLength == 6) {
                if (sms_codeValue == lastCaptcha) {
                    $api.byId('checkCaptcha').innerText = '验证码正确';
                }else{
                    $api.byId('checkCaptcha').innerText = '验证码错误';
                }
            }else{
                $api.byId('checkCaptcha').innerText = '验证码错误';
            }
        }

        function licai_box_close(){
            $(".licai-buy-box-bg").hide();
        }
        function licai_box(){
            $(".licai-buy-box-bg").show();
        }

        // 下一步按钮
        function user_password_retrieve(){
            
            // 手机号
            var mobileEle = $api.byId('mobile');
            var mobileValue = mobileEle.value;

            // 验证码
            var sms_codeEle = $api.byId('sms_code');
            var sms_codeValue = sms_codeEle.value;
            var sms_codeLength = sms_codeValue.length;

            if (sms_codeLength == 6) {
                if (sms_codeValue == lastCaptcha) {
                    $api.byId('checkCaptcha').innerText = '验证码正确';
                    api.openWin({
                        name: 'user_password_retrieve',
                        url: './user_password_retrieve.html',
                        pageParam: {
                            sms_codeValue: lastCaptcha,
                            mobileValue: mobileValue,
                        }
                    });
                }else{
                    $api.byId('checkCaptcha').innerText = '验证码错误';
                }
            }else{
                $api.byId('checkCaptcha').innerText = '验证码错误';
            }
        };

        // 关闭页面
        function closeWin(){
            api.closeWin({
            });
        }

    </script>
    </html>